<script setup>
  const colorMode = useColorMode('light');
  const changeTheme = (theme)=>{
    colorMode.preference = theme
  }
</script>
<template>
  <div class="relative container xl mx-auto p-4">
    <div class="absolute right-4 top-4 cursor-pointer">
      <Icon name="material-symbols:light-mode" v-if="colorMode.preference == 'dark'" @click="changeTheme('light')" />
      <Icon name="material-symbols:dark-mode" v-else @click="changeTheme('dark')" />
    </div>

    <NuxtPage></NuxtPage>
    <div class="text-center my-2.5">
      <span class="align-middle">Power by </span><Icon name="logos:nuxt-icon" /><span class="text-nuxt-color align-middle">Nuxt3</span></div>
  </div>
</template>

<style lang="postcss">
body {
  @apply min-h-screen bg-white dark:bg-gray-800 dark:text-gray-200;
}
</style>